<template>
    <div class="map-content">
        <div id="cesiumContainer" class="cesiumContainer" />
        <!--    <div-->
        <!--      v-loading="mapLoadingText!==''"-->
        <!--      :element-loading-text="mapLoadingText"-->
        <!--      element-loading-background="rgba(0, 0, 0, 0.5)"-->
        <!--      class="map_loading"-->
        <!--    />-->
        <mapLoading />
        <mapLoadingStep />
        <!--    <div v-show="bgFull" class="bodyBg"><img src="@/assets/newimg/bodyBg.png" width="100%" height="100%"></div>-->
        <!--    <div v-show="!bgFull" class="bodyBg"><img src="@/assets/newimg/bodyBg2.png" width="100%" height="100%"></div>-->
        <BasinChange />

        <div class="float-warp" :style="{ right: floatRight }">
            <RightBtnGroup />
            <LegendFrame v-if="$route.path === '/prediction/Measured'">
                <LegendRainMeasured v-if="pageState.YB_SC_ZD" />
                <LegendLadar v-if="pageState.YB.indexOf('_LD_MESH') !== -1" />
                <LegendLadarFSL v-if="pageState.YB.indexOf('_LD_FSL_') !== -1" />
                <LegendRainPrediction v-if="pageState.YB === 'YB_YB'" />
            </LegendFrame>
            <LegendFrame :class="{ 'legendFrameW32': pageState.HSFX_TYPE != 'flow' }"
                v-if="$route.path === '/prediction/ShortPro/index'">
                <LegendYbHsfxRate v-if="pageState.HSFX_TYPE === 'rate'" />
                <LegendYbHsfxFlow v-if="pageState.HSFX_TYPE === 'flow'" />
                <LegendYYYMFW v-if="pageState.yubaoFenXi_YMFW" />
                <LegendYYFXD v-if="pageState.yubaoFenXi_FXD" />
            </LegendFrame>
            <LegendFrame v-if="$route.path === '/earlyWarning/EarlyWarningInfo/index' && (pageState.YJ === 'QX_YB'||pageState.YJ === 'QX_FW'||pageState.YJ === 'QX_ZQ' || pageState.YJ === 'LJ' || pageState.YJ === 'JC')">
                <LegendRainPrediction v-if="pageState.YJ === 'QX_YB'" />
                <LegendFXFW v-if="pageState.YJ === 'QX_FW'" />
                <LegendYJQXZQ v-if="pageState.YJ === 'QX_ZQ'" />
                <LegendYJLJ v-if="pageState.YJ === 'LJ'" />
                <LegendYJJC v-if="pageState.YJ === 'JC'" />
            </LegendFrame>
            <LegendFrame
                v-if="$route.path === '/Rehearsal' && (pageState.yuYanIsCreat_SCJY || pageState.yuYanInfoType === 'FXPG' || pageState.goToYuyan === true)">
                <!-- <LegendHD /> -->
                <!-- <LegendYYFXD v-if="pageState.yubaoFenXi_FXD && pageState.yuYanInfoType !== 'FXPG' && SceneMode==false" /> -->
                <LegendRiskAssessment v-if="pageState.yuYanInfoType === 'FXPG' || pageState.goToYuyan === true" />
                <!-- <LegendRiskAssessment v-if="pageState.yuYanInfoType === 'FXPG' || pageState.goToYuyan === true || SceneMode==true "/> -->
                <!-- <LegendYYYMFW v-if="pageState.yuYanInfoType === 'FXPG'" /> -->
                <!-- <LegendYYFXD v-if="pageState.yuYanInfoType === 'FXPG'" /> -->
                <LegendRainMeasured v-if="pageState.yuYanIsCreat_SCJY" />
                <LegendYJLJ v-if="pageState.yuYanIsCreat_SCJY" />
            </LegendFrame>
            <LegendFrame v-if="$route.path === '/reserveplan/previewPlan'">
                <LegendHD />
                <LegendYYYMFW v-if="pageState.yuAn_YYYA_Right_Type === 1" />
                <LegendYYFXD v-if="pageState.yuAn_YYYA_Right_Type === 1" />
            </LegendFrame>
            <LegendFrame v-if="$route.path === '/reserveplan/visualization' && Isyuyanyagl">
                <LegendHD />
                <LegendYYYMFW v-if="pageState.yuAn_YYYA_Right_Type === 1" />
                <LegendYYFXD v-if="pageState.yuAn_YYYA_Right_Type === 1" />
            </LegendFrame>
        </div>
        <!--    <PositionInfo />-->

        <PopCommon />
        <PopHD v-if="$store.getters.popStayParams.name === '隐患自定义'" />
        <PopYJCZ v-if="$store.getters.popStayParams.name === '村庄预警信息'" />
        <PopYJHD v-if="$store.getters.popStayParams.name === '河道预警信息'" />
        <PopCZYA v-if="$store.getters.popStayParams.name === '村庄预案信息'" />
        <Player v-if="$store.getters.playerParams.show" />

        <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'SectionWaterLevel'" mask class="MeasuredDlgStyle01">
            <!-- <template v-slot:title> 断面水位 </template> -->
            <template v-slot:title> {{ $store.getters.dlgParams.params.sectionName  }} </template>
            <template v-slot:body>
                <SectionWaterLevel />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '历史洪痕'" mask class="MeasuredDlgStyle">
            <template v-slot:title> 历史洪痕点 </template>
            <template v-slot:body>
                <FloodMark />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '桥涵'" mask class="MeasuredDlgStyleShort5">
            <!-- <template v-slot:title> 桥涵 </template> -->
            <template v-slot:title> {{ $store.getters.dlgParams.remarks.NAME }} </template>
            <template v-slot:body>
                <LayerDetailsQLYHDC />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '塘堰坝'" mask class="MeasuredDlgStyleShort">
            <!-- <template v-slot:title> 塘堰坝 </template> -->
            <template v-slot:title> {{ $store.getters.dlgParams.remarks.NAME }} </template>
            <template v-slot:body>
                <LayerDetailsTYB />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '跨沟道路'" mask class="MeasuredDlgStyleShort">
            <template v-slot:title> 跨沟道路 </template>
            <!-- <template v-slot:title> {{ $store.getters.dlgParams.remarks.NAME }} </template> -->
            <template v-slot:body>
                <LayerDetailsKGDL />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '面状沟滩占地'" mask class="MeasuredDlgStyleShort">
            <template v-slot:title> 面状沟滩占地 </template>
            <template v-slot:body>
                <LayerDetailsMZGTZD />
            </template>
        </Dlgdiv>

        <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'WarningDigInfo'" mask class="MeasuredDlgStyle">
            <template v-slot:title> 详情 </template>
            <template v-slot:body>
                <WarningDig />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'WarningHdDigInfo'" mask class="MeasuredDlgStyle">
            <template v-slot:title> 详情 </template>
            <template v-slot:body>
                <warningHdDig />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '防洪特征值'" mask class="MeasuredDlgStyleShort2">
            <template v-slot:title> 防洪特征值 </template>
            <template v-slot:body>
                <LayerDetailsFHTZZ />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '洪水频率值'" mask class="MeasuredDlgStyleShort2">
            <template v-slot:title> 洪水频率图 </template>
            <template v-slot:body>
                <LayerDetailsHSPLT />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '设计洪水特征值'" mask class="MeasuredDlgStyleShort3">
            <template v-slot:title> 设计洪水特征值 </template>
            <template v-slot:body>
                <LayerDetailsSJHSTZZ />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '风险隐患保护对象'" mask class="MeasuredDlgStyleShort4">
            <template v-slot:title> 风险隐患保护对象 </template>
            <template v-slot:body>
                <LayerDetailsFXYHBHDX />
            </template>
        </Dlgdiv>
        <Dlgdiv v-if="$store.getters.dlgParams.name === '外洪顶托调查分析成果'" mask class="MeasuredDlgStyleShort4">
            <template v-slot:title> 外洪顶托调查分析成果 </template>
            <template v-slot:body>
                <LayerDetailsWHDTDCFXJG />
            </template>
        </Dlgdiv>

    </div>
</template>

<script>
import Vue from 'vue'
import BasinChange from './BasinChange'
import RightBtnGroup from './RightBtnGroup'
import Player from './Player'

import LegendFrame from './legend/LegendFrame'
import LegendRainMeasured from './legend/LegendRainMeasured'
import LegendLadar from './legend/LegendLadar'
import LegendLadarFSL from './legend/LegendLadarFSL'
import LegendYbHsfxRate from './legend/LegendYbHsfxRate'
import LegendYbHsfxFlow from './legend/LegendYbHsfxFlow'
import LegendYYYMFW from './legend/LegendYYYMFW'
import LegendYYFXD from './legend/LegendYYFXD'
import LegendRainPrediction from './legend/LegendRainPrediction'
import LegendYJQXZQ from './legend/LegendYJQXZQ'
import LegendFXFW from './legend/LegendFXFW'
import LegendYJLJ from './legend/LegendYJLJ'
import LegendYJJC from './legend/LegendYJJC'
import LegendHD from './legend/LegendHD'
import LegendRiskAssessment from './legend/LegendRiskAssessment'

import PopCommon from './pop/PopCommon'
import PopHD from './pop/PopHD'
import PopYJCZ from './pop/PopYJCZ'
import PopYJHD from './pop/PopYJHD'
import PopCZYA from './pop/PopCZYA'
import camera from './mixins/camera'
import PositionInfo from './PositionInfo'

import mapLoading from './mapLoading'
import mapLoadingStep from './mapLoadingStep'
import rainMeasured from './mixins/rainMeasured'
import ladarMesh from './mixins/ladarMesh'
import HS_YMFW from './mixins/HS_YMFW'
import ybFengXianDian from './mixins/ybFengXianDian'
import maxYanMoFanWei from './mixins/maxYanMoFanWei'
import fengXianDian from './mixins/fengXianDian'
import YY_YJ_LJ from './mixins/YY_YJ_LJ'

import SectionWaterLevel from '@/views/components/SectionWaterLevel.vue'
import WarningDig from '@/views/components/warningDig.vue'
import warningHdDig from '@/views/components/warningHdDig.vue'
import FloodMark from '@/views/components/FloodMark.vue'
import LayerDetailsQLYHDC from '@/views/components/LayerDetailsQLYHDC.vue'
import LayerDetailsTYB from '@/views/components/LayerDetailsTYB.vue'
import LayerDetailsKGDL from '@/views/components/LayerDetailsKGDL.vue'
import LayerDetailsMZGTZD from '@/views/components/LayerDetailsMZGTZD.vue'
import LayerDetailsFHTZZ from '@/views/components/LayerDetailsFHTZZ.vue'
import LayerDetailsHSPLT from '@/views/components/LayerDetailsHSPLT.vue'
import LayerDetailsSJHSTZZ from '@/views/components/LayerDetailsSJHSTZZ.vue'
import LayerDetailsFXYHBHDX from '@/views/components/LayerDetailsFXYHBHDX.vue'
import LayerDetailsWHDTDCFXJG from '@/views/components/LayerDetailsWHDTDCFXJG.vue'


export default {
    name: 'CesiumViewer',
    components: {
        LegendFrame,
        mapLoading,
        mapLoadingStep,
        PositionInfo,
        BasinChange,
        RightBtnGroup,
        Player,
        LegendRainMeasured,
        LegendLadar,
        LegendLadarFSL,
        LegendYbHsfxRate,
        LegendYbHsfxFlow,
        LegendYYYMFW,
        LegendYYFXD,
        LegendRainPrediction,
        LegendYJQXZQ,
        LegendFXFW,
        LegendYJLJ,
        LegendYJJC,
        LegendHD,
        LegendRiskAssessment,
        PopCommon,
        PopHD,
        PopYJCZ,
        PopYJHD,
        PopCZYA,

        SectionWaterLevel,
        WarningDig,
        warningHdDig,
        FloodMark,
        LayerDetailsQLYHDC,
        LayerDetailsTYB,
        LayerDetailsMZGTZD,
        LayerDetailsFHTZZ,
        LayerDetailsHSPLT,
        LayerDetailsSJHSTZZ,
        LayerDetailsKGDL,
        LayerDetailsFXYHBHDX,
        LayerDetailsWHDTDCFXJG,
    },
    mixins: [
        camera,
        rainMeasured,
        ladarMesh,
        HS_YMFW,
        ybFengXianDian,
        maxYanMoFanWei,
        fengXianDian,
        YY_YJ_LJ
    ],
    data() {
        return {
            bgFull: true,
            floatRight: '450px',
            cn: null,
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        },
        basinArry() {
            return this.$store.getters.basinArry
        },
        mapLoadingText() {
            return this.$store.getters.mapLoadingText
        },
        rightFold() {
            return this.$store.getters.rightFold
        },
        pageState() {
            return this.$store.getters.pageState
        },
        SceneMode() {
            return this.$store.getters.SceneMode
        },
        Isyuyanyagl() {
            return this.$store.getters.Isyuyanyagl
        },
        level() {
            return this.$store.getters.level
        },

    },
    watch: {
        // rightFold 右边是否展开
        rightFold: {
            immediate: true,
            handler: function (val, oldVal) {
                this.floatRight = val ? '1%' : 'calc(22.5% - 40px)';//'19.5%'
            }
        },

        $route: {
            handler: function (val, oldVal) {
                // console.log(val)
            },
            // 深度观察监听
            deep: true
        },
        pageState: {
            immediate: true,
            deep: true,
            handler: function (val, oldVal) {
                console.log(val)
            }
        },
        level: {
            immediate: true,
            handler: function (val, oldVal) {
            //    console.log(val);
               this.watchLevel(val)
            }
        },
    },
    created() {
        this.defaultResetView = this.DXSView;
        this.$eventBus.$on('changeBg', state => {
            this.bgFull = state
        })
        console.log('SceneMode', this.$store.getters.SceneMode);
    },
    mounted() {
        this.initViewer()
    },
    methods: {
        initViewer() {

            Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMDY0OGY2NS1iNjVkLTRiOGUtOT' +
                'c1Ni0xMzBiYzEwOWVhYmEiLCJpZCI6NjE1Miwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU2Mzc4MTAzOX0' +
                '.nQcyfvrJ8CJXuyUQd0hCcjtjEZpOpcFlko4fo7KNEe0'
            const viewerOption = {
                selectionIndicator: false,
                homeButton: false,
                sceneMode: Cesium.SceneMode.SCENE3D, // SCENE3D   COLUMBUS_VIEW
                // mapProjection: new Cesium.WebMercatorProjection(),
                scene3DOnly: true,
                // terrainProvider: Cesium.createWorldTerrain(),
                // terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
                // orderIndependentTranslucency: true,
                // contextOptions: {
                //     webgl: {
                //         alpha: true
                //     }
                // },
                // imageryProvider: new Cesium.UrlTemplateImageryProvider({
                //   url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
                // }),
                // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                //     url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
                //     enablePickFeatures: false
                // }),
                // imageryProvider: new Cesium.TileMapServiceImageryProvider({
                //     url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
                // }),
                // terrainProvider: new Cesium.EllipsoidTerrainProvider(),
                // terrainProvider: new Cesium.CesiumTerrainProvider({
                // url: '/mapData/guangdong/terr/' // 125
                // url: '/mapData/guangdong/dem_5m_RH/' // 125
                // url: 'http://183.6.105.178:6088/terrain/ArLpWlxO/' // 125
                // url: '/nodeserve/terrserve/terr85' // 125
                // }),
                imageryProvider: new Cesium.SingleTileImageryProvider({
                    url: require('@/assets/map/mapBack.png')
                }),
                fullscreenButton: false, // 是否显示全屏按钮

                shadows: false,
                shouldAnimate: true,
                animation: false, // 是否显示动画控件
                baseLayerPicker: false, // 是否显示图层选择控件
                geocoder: false, // 是否显示地名查找控件
                timeline: false, // 是否显示时间线控件
                sceneModePicker: false, // 是否显示投影方式控件
                navigationHelpButton: false, // 是否显示帮助信息控件
                infoBox: false // 是否显示点击要素之后显示的信息

            }

            const viewer = new Cesium.Viewer('cesiumContainer', viewerOption)
            Vue.prototype.$viewer = viewer

            viewer.scene.debugShowFramesPerSecond = process.env.NODE_ENV === 'development'
            viewer.scene.globe.depthTestAgainstTerrain = false
            viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.PINCH, Cesium.CameraEventType.RIGHT_DRAG]

            viewer._cesiumWidget._creditContainer.style.display = 'none'// 隐藏版权
            this.setRender(viewer)
            this.setCameraController(viewer)
            this.initEvevtPublic(viewer)
            this.initCesiumNavigation(viewer)
            // this.distanceLegendViewModel(viewer)
        },
        initCesiumNavigation(viewer) {
            var _this = this;
            // if (this.cn) {
            //     _this.cn.destroy();
            // }
            const options = {
                // defaultResetView: Cesium.Rectangle.fromDegrees(80, 22, 130, 50),
                // defaultResetView: _this.defaultResetView,
                defaultResetView: false,
                enableCompass: true,
                enableZoomControls: true,
                enableDistanceLegend: true,
                enableCompassOuterRing: true
            }

            var cn = new CesiumNavigation(viewer, options)
            // 创建自定义重置视图按钮
            var resetButton = document.createElement('button');
            resetButton.textContent = ' ';
            resetButton.style.background = 'transparent';
            // resetButton.style.background = '#fff';
            resetButton.style.border = 'none';
            resetButton.style.width = '28px';
            resetButton.style.height = '22px';
            resetButton.style.position = 'absolute';
            resetButton.style.top = '152px';
            resetButton.style.left = '31px';
            resetButton.style.cursor = 'pointer';
            // 添加按钮的点击事件处理函数
            resetButton.addEventListener('click', function () {
                var pos = _this.basinArry[_this.basin]
                _this.$viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.h),
                    orientation: {
                        heading: Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
                        pitch: Cesium.Math.toRadians(-90), // default value (looking down)
                        roll: pos.r // default value
                    }
                })
            });

            // 将自定义按钮添加到地图容器中
            var mapContainer = document.getElementById('navigationDiv');
            mapContainer.appendChild(resetButton);
        },
        updateDistanceLegendCesium(viewModel, scene) {
            var geodesic = new Cesium.EllipsoidGeodesic()
            var distances = [
                1, 2, 3, 5,
                10, 20, 30, 50,
                100, 200, 300, 500,
                1000, 2000, 3000, 5000,
                10000, 20000, 30000, 50000,
                100000, 200000, 300000, 500000,
                1000000, 2000000, 3000000, 5000000,
                10000000, 20000000, 30000000, 50000000]

            var now = Cesium.getTimestamp()
            if (now < viewModel._lastLegendUpdate + 250) {
                return
            }
            viewModel._lastLegendUpdate = now

            // Find the distance between two pixels at the bottom center of the screen.
            var width = scene.canvas.clientWidth
            var height = scene.canvas.clientHeight

            var left = scene.camera.getPickRay(new Cesium.Cartesian2((width / 2) | 0, height - 1))
            var right = scene.camera.getPickRay(new Cesium.Cartesian2(1 + (width / 2) | 0, height - 1))

            var globe = scene.globe
            var leftPosition = globe.pick(left, scene)
            var rightPosition = globe.pick(right, scene)

            if (!leftPosition || !rightPosition) {
                return
            }

            var leftCartographic = globe.ellipsoid.cartesianToCartographic(leftPosition)
            var rightCartographic = globe.ellipsoid.cartesianToCartographic(rightPosition)

            geodesic.setEndPoints(leftCartographic, rightCartographic)
            var pixelDistance = geodesic.surfaceDistance

            var maxBarWidth = 100
            var distance
            for (var i = distances.length - 1; !distance && i >= 0; --i) {
                if (distances[i] / pixelDistance < maxBarWidth) {
                    distance = distances[i]
                }
            }
            console.log(distance)
        },

        setCameraController(viewer) {
            const scene = viewer.scene
            var geodesic = new Cesium.EllipsoidGeodesic()
            var distances = [
                1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000, 10000, 20000, 30000, 50000,
                100000, 200000, 300000, 500000, 1000000, 2000000, 3000000, 5000000, 10000000, 20000000, 30000000,
                50000000
            ]
            scene.screenSpaceCameraController.minimumZoomDistance = 10// 相机的高度的最小值
            // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 100000 // 相机高度的最大值
            camera.percentageChanged = 1
            scene.screenSpaceCameraController.enableRotate = true
            scene.screenSpaceCameraController.enableTranslate = true
            scene.screenSpaceCameraController.enableZoom = true
            scene.screenSpaceCameraController.enableTilt = true
            scene.screenSpaceCameraController.enableLook = true

            scene.postRender.addEventListener(() => {
                var now = Cesium.getTimestamp()
                if (now < this._lastPostRenderTime + 200) {
                    return
                }
                this._lastPostRenderTime = now
                var width = scene.canvas.clientWidth
                var height = scene.canvas.clientHeight

                var left = scene.camera.getPickRay(new Cesium.Cartesian2((width / 2) | 0, height - 1))
                var right = scene.camera.getPickRay(new Cesium.Cartesian2((1 + width / 2) | 0, height - 1))
                var leftPosition = scene.globe.pick(left, scene)
                var rightPosition = scene.globe.pick(right, scene)
                if (!leftPosition || !rightPosition) {
                    return
                }
                var leftCartographic = scene.globe.ellipsoid.cartesianToCartographic(leftPosition)
                var rightCartographic = scene.globe.ellipsoid.cartesianToCartographic(rightPosition)

                geodesic.setEndPoints(leftCartographic, rightCartographic)
                var pixelDistance = geodesic.surfaceDistance
                window.pixelDistance = pixelDistance
                var maxBarWidth = 100
                var distance
                for (var i = distances.length - 1; !distance && i >= 0; --i) {
                    if (distances[i] / pixelDistance < maxBarWidth) {
                        distance = distances[i]
                    }
                }
                this.$store.dispatch('level', distance)
                this.$store.getters.eventCesiumOption.levelFns.forEach((fn, key) => {
                    fn(distance)
                })
            })
        },
        setRender(viewer) {
            if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                viewer.resolutionScale = window.devicePixelRatio
            }
            viewer.scene.fxaa = false
            viewer.scene.postProcessStages.fxaa.enabled = false
        },
        initEvevtPublic(viewer) {
            this.screenSpaceEventHandlerPublic = new Cesium.ScreenSpaceEventHandler(
                viewer.scene.canvas
            )

            this.screenSpaceEventHandlerPublic.setInputAction(event => {
                if (!this.$store.getters.eventCesiumOption.isDrawing) {
                    var pickedObject = viewer.scene.pick(event.position)
                    this.$store.getters.eventCesiumOption.leftPickFns.forEach((fn, key) => {
                        fn(pickedObject, event.position)
                    })
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

            this.screenSpaceEventHandlerPublic.setInputAction(event => {
                // 如果正在标绘
                if (this.$store.getters.eventCesiumOption.isDrawing) return
                if (!event.endPosition.x) return
                const pickedObject = viewer.scene.pick(event.endPosition)
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName
                ) {
                    viewer._container.style.cursor = 'pointer'
                    const popParams = this.$store.getters.popParams

                    // popParams.posX = Math.round(event.endPosition.x)
                    // popParams.posY = Math.round(event.endPosition.y)
                    // popParams.name = '通用'

                    const eventName = pickedObject.id.eventName
                    if (eventName === 'PredictionRain') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: pickedObject.id.drp }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'NAME') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: pickedObject.id.prop.NAME }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'QLYHDC') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        console.log('桥梁', pickedObject);

                        popParams.remarks = [
                            { name: null, value: pickedObject.id.prop.NAME },
                            { name: '阻水比', value: pickedObject.id.prop.SR1 },
                            { name: '沟宽', value: pickedObject.id.prop.LENGTH + 'm' },
                            { name: '沟深', value: pickedObject.id.prop.HEIGHT + 'm' },
                            { name: '影响对象', value: pickedObject.id.prop.KADNM || '--' },
                            { name: null, value: pickedObject.id.prop['隐患情'] }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'RHDC') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '户主'
                        popParams.remarks = [
                            { name: '户主', value: pickedObject.id.prop['户主名'] },
                            { name: '户数', value: pickedObject.id.prop['户数(户)'] + '户' },
                            { name: '家庭人数', value: pickedObject.id.prop['家庭人'] + '人' },
                            { name: '建筑面积', value: pickedObject.id.prop['建筑面'] + 'm²' },
                            { name: '建筑类型', value: pickedObject.id.prop['建筑类'] },
                            { name: '结构形态', value: pickedObject.id.prop['结构形'] }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'YHCL') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '名称', value: pickedObject.id.prop.STNM }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'FZC') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '名称', value: pickedObject.id.prop.ADNM },
                            { name: '房屋数', value: pickedObject.id.prop.HOUSE },
                            { name: '人口数', value: pickedObject.id.prop.PCOUNT }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'YBFXD') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '名称', value: pickedObject.id.prop.ewName },
                            { name: '房屋数', value: pickedObject.id.prop.house },
                            { name: '人口数', value: pickedObject.id.prop.pCount }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }

                    if (eventName === 'FXYJ') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [{ name: null, value: pickedObject.id.prop.village }]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'JCYJ') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [{ value: pickedObject.id.prop.Village }]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'CZYA') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [{ value: pickedObject.id.prop.addvnm }]
                        this.$store.dispatch('popParams', popParams)
                    }

                    if (eventName === 'YBYJ') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [{ value: pickedObject.id.prop.Village }]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'RIVL临近预警') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [{ value: pickedObject.id.propByYbyj.Ewcode }]
                        this.$store.dispatch('popParams', popParams)
                    }

                    // 预演风险点
                    if (eventName === 'YYFXD') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '名称', value: pickedObject.id.prop.ewName },
                            { name: '房屋数', value: pickedObject.id.prop.house },
                            { name: '人口数', value: pickedObject.id.prop.pCount }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 隐患点
                    if (eventName === '隐患名称' || eventName === '隐患自定义') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [{ value: pickedObject.id.prop.name }]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === '隐患详情') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        var hiddenbegin = this.$moment(pickedObject.id.propConfig.hiddenbegin).format('YYYY-MM-DD HH:mm')
                        var hiddenend = this.$moment(pickedObject.id.propConfig.hiddenend).format('YYYY-MM-DD HH:mm')
                        popParams.remarks = [
                            { value: pickedObject.id.propConfig.name },
                            { name: '堵水类型', value: pickedObject.id.propConfig.dstypeName },
                            { name: '堵塞开始', value: hiddenbegin },
                            { name: '堵塞结束', value: hiddenend }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'LSHH' || eventName === 'TYB' || eventName === 'KGDL') {//历史洪痕
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: pickedObject.id.prop.NAME }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    if (eventName === 'ZDJCZ') {//自动监测站
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '监测站名称', value: pickedObject.id.prop.STNM }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }

                    // 山洪灾害风险区划--低风险
                    if (eventName === 'SHZHDFXQ') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '区划名称', value: pickedObject.id.prop.ADNM },
                            { name: '河流名称', value: pickedObject.id.prop.RIVLNM },
                            { name: '编码', value: pickedObject.id.prop.CODE },
                            { name: '等级', value: pickedObject.id.prop.LEVEL },
                            { name: '面积(km²)', value: pickedObject.id.prop.AREA },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 山洪灾害风险区划--中风险
                    if (eventName === 'SHZHZFXQ') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '区划名称', value: pickedObject.id.prop.ADNM },
                            { name: '河流名称', value: pickedObject.id.prop.RIVLNM },
                            { name: '编码', value: pickedObject.id.prop.CODE },
                            { name: '等级', value: pickedObject.id.prop.LEVEL },
                            { name: '面积(km²)', value: pickedObject.id.prop.AREA },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 山洪灾害风险区划--高风险
                    if (eventName === 'SHZHGFXQ') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '区划名称', value: pickedObject.id.prop.ADNM },
                            { name: '河流名称', value: pickedObject.id.prop.RIVLNM },
                            { name: '编码', value: pickedObject.id.prop.CODE },
                            { name: '等级', value: pickedObject.id.prop.LEVEL },
                            { name: '面积(km²)', value: pickedObject.id.prop.AREA },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 山洪灾害风险区划
                    // if (eventName === 'SHZHFXQH') {
                    //     console.log(pickedObject.id.prop);
                    //     popParams.posX = Math.round(event.endPosition.x)
                    //     popParams.posY = Math.round(event.endPosition.y)
                    //     popParams.name = '通用'
                    //     popParams.remarks = [
                    //         { name: '区划名称', value: pickedObject.id.prop.ADNM },
                    //         { name: '河流名称', value: pickedObject.id.prop.RIVLNM },
                    //         { name: '编码', value: pickedObject.id.prop.CODE },
                    //         { name: '等级', value: pickedObject.id.prop.LEVEL },
                    //         { name: '面积(km²)', value: pickedObject.id.prop.AREA },

                    //     ]
                    //     this.$store.dispatch('popParams', popParams)
                    // }
                    // 山洪灾害风险区划
                    if (eventName === '5年一遇' || eventName === '10年一遇' || eventName === '20年一遇' || eventName === '50年一遇' || eventName === '100年一遇') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '洪水频率', value: eventName },
                            { name: '淹没面积(km²)', value: this.areaKmToM(pickedObject.id.prop.AREA) },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 防洪特征值
                    if (eventName === '防洪特征值') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: '防洪特征值' },
                            { name: '行政区名称', value: pickedObject.id.prop.ADNM },
                            { name: '河流名称', value: pickedObject.id.prop.RIVLNM },
                            { name: '高程基准', value: pickedObject.id.prop.ELE },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 洪水频率值
                    if (eventName === '洪水频率值') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: '洪水频率值' },
                            { name: '河流名称', value: pickedObject.id.prop.RIVLNM },
                            { name: '断面位置', value: pickedObject.id.prop.ADDR },
                            { name: '集雨面积（km²）', value: pickedObject.id.prop.AREA },
                            { name: '比降（‰）', value: pickedObject.id.prop.RVSLP },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 设计洪水特征值
                    if (eventName === '设计洪水特征值') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: '设计洪水特征值' },
                            { name: '行政区名称', value: pickedObject.id.prop.ADNM },
                            { name: '河流名称', value: pickedObject.id.prop.RIVLNM },
                            { name: '断面名称', value: pickedObject.id.prop.ADDR },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 风险隐患保护对象
                    if (eventName === '风险隐患保护对象') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: pickedObject.id.prop.ADNM }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 沟滩占地
                    if (eventName === 'MZGTZD') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: pickedObject.id.prop.NAME }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 外洪顶托调查分析成果
                    if (eventName === '外洪顶托调查分析成果') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: pickedObject.id.prop.ADNM }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 山洪沟
                    if (eventName === '山洪沟') {
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: null, value: pickedObject.id.prop.RVNM }
                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 低洼处房屋
                    if (eventName === '低洼处房屋') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '面积（km²）', value: pickedObject.id.prop.AREA },
                            { name: '周长（km）', value: pickedObject.id.prop.WSPERI }, //不知哪个字段

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 受影响自然村
                    if (eventName === '受影响自然村') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '行政区名称', value: pickedObject.id.prop.ADNM },
                            { name: '行政区划代码', value: pickedObject.id.prop.ADCD },
                            { name: '总户数', value: pickedObject.id.prop.HTCOUNT },
                            { name: '总人口', value: pickedObject.id.prop.PCOUNT },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }
                    // 重要公共基础设施
                    if (eventName === '重要公共基础设施') {
                        console.log(pickedObject.id.prop);
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        popParams.name = '通用'
                        popParams.remarks = [
                            { name: '名称', value: pickedObject.id.prop.NAME },
                            { name: '类型', value: pickedObject.id.prop.TYPE },

                        ]
                        this.$store.dispatch('popParams', popParams)
                    }

                } else {
                    viewer._container.style.cursor = 'default'
                    this.$store.dispatch('closePop')
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        },
        watchLevel(level){
         
        }
    }
}
</script>

<style lang="scss">
//fpx
.cesium-performanceDisplay-defaultContainer {
    top: 200px;
}

.cesium-widget-cesiumNavigationContainer {
    display: block;
    position: absolute;
    // top: 20%;
    top: 184px;
    left: 21%;
    width: 100PX;
    height: 230PX;
    z-index: 2;
    /*border: 1px solid red;*/

    #navigationDiv {
        /*border: 1px solid #e0be12;*/
        position: absolute;
        left: 0%;
        top: 0%;

        .compass {
            top: 0;
            left: 0;
        }

        .navigation-controls {
            top: 120PX;
            left: 30PX;
        }
    }

    #distanceLegendDiv {
        /*border: 1px solid #13f208;*/
        position: absolute;
        left: 0%;
        top: 110PX;

        .distance-legend {
            bottom: 0;
            left: -20PX;
        }
    }
}

.map-content {
    position: absolute;
    top: 0; // 70+32
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .cesiumContainer {
        position: absolute;
        top: 0; // 70+32
        width: 100%;
        height: 100%;
        z-index: 0;

    }

    .float-warp {
        width: 0px;
        height: 100%;
        position: absolute;
        right: 0px;
        /*border: 1px solid red;*/
        z-index: 20;
    }

    .map_loading {
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        word-wrap: break-word;
        white-space: pre-wrap;
        text-align: center;
    }

    .bodyBg {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }

}
</style>
<style lang="less" scoped>
.MeasuredDlgStyle {
    width: 70% !important;
    //height: 80% !important;
    // height: 80% !important;
    // max-height: 700px;
    left: 15%;
    top: 5%
}

.MeasuredDlgStyle01 {
    width: 70% !important;
    //height: 80% !important;
    // height: 80% !important;
    // max-height: 700px;
    left: 15%;
    top: 10%
}

.MeasuredDlgStyleShort {
    width: 70% !important;
    left: 15%;
    top: 15%
}

.MeasuredDlgStyleShort2 {
    width: 70% !important;
    left: 15%;
    top: 26%
}

.MeasuredDlgStyleShort3 {
    width: 70% !important;
    left: 15%;
    top: 15%
}

.MeasuredDlgStyleShort4 {
    width: 70% !important;
    height: 700px !important;
    left: 15%;
    top: 10%
}

.MeasuredDlgStyleShort5 {
    width: 70% !important;
    height: 700px !important;
    left: 15%;
    top: 10%
}

.section-box {
    width: 100%;
    height: 100%;
}

.top_llfxChart {
    height: 300px;
    margin-bottom: 10px;
}

.tableBox {
    height: calc(100% - 320px);

    .collapse_div {
        height: calc(100% - 20px);
        overflow: auto;
    }
}

.tab {
    width: 100%;
    margin-left: 0px;
    justify-content: space-between;
}

.tab .tabTit {
    padding: 0;
    width: 32%;
    margin: 0px;
    box-sizing: border-box;
}
</style>
